<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            margin: 40px;
        }

        fieldset {
            width: 697px;
            height: 220px;
            border: 2px solid #b8dad9;
        }

        div {
            margin-top: 15px;
            margin-left: 25px;
        }

        .col {
            color: red;
            margin-left: 15px;
        }

        button {
            width: 100px;
            height: 30px;
            color: white;
            background-color: #40acc8;
            border: none;
            border-radius: 3px;
            margin-top: 12px;
            margin-left: 30px;
        }

        table {
            border-collapse: collapse;
            border: 2px solid #40acc7;
            margin-left: -25px;
        }

        .trr {
            color: white;
            line-height: 50px;
            background-color: #40acc7;
        }

        tr:nth-of-type(odd) {
            background-color: #ebebeb;
        }

        tr:nth-of-type(1) {
            background-color: #40acc7;
        }

        td {
            padding-left: 45px;
            padding-right: 30px;
            line-height: 40px;
            text-align: center;
        }

        #boxx button {
            width: 55px;
            color: white;
            background-color: #40acc8;
            border-radius: 3px;
            text-align: center;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div id="box">
        <fieldset>
            <legend> 学生信息录入系统</legend>
            <div>
                姓名: <input type="text" v-model="name" @input="adds('name')"><span class="col"
                    v-show="!reg.regname">4到16位(字母、数字、下划线)</span>
            </div>
            <div>
                年龄: <input type="text" v-model="age" @input="adds('age')"><span class="col"
                    v-show="!reg.regage">年龄0岁-120岁</span>
            </div>
            <div>
                性别: <select name="" id="" v-model="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div>
                手机: <input type="text" v-model="phone" @input="adds('tel')"><span class="col"
                    v-show="!reg.regtel">请输入11位手机号码</span>
            </div>
            <button @click="add()">创建新用户</button>
        </fieldset>
        <div id="boxx">
            <table>
                <tr class="trr">
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>手机</td>
                    <td>删除</td>
                </tr>
                <tr v-for="(item,index) in arr">
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.phone}}</td>
                    <td><button @click="fn(index)">删除</button></td>
                </tr>

            </table>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {
                arr: [
                    { name: "方君昊", sex: "男", age: "20", phone: "15473124380", istuer: false },
                    { name: "乔向雁", sex: "女", age: "22", phone: "15373124380", istuer: false },
                    { name: "鲁傲柔", sex: "男", age: "23", phone: "15273124380", istuer: false },
                    { name: "寸琴韵", sex: "女", age: "21", phone: "15173124380", istuer: false }
                ],
                name: "",
                sex: "",
                age: "",
                phone: "",
                reg: { regname: false, regage: false, regtel: false }
            },
            methods: {
                // 添加
                add() {
                    if (this.reg.regname && this.reg.regage && this.reg.regtel) {
                        this.arr.push({
                            name: this.name,
                            sex: this.sex,
                            age: this.age,
                            phone: this.phone
                        })
                        this.name = "",
                            this.sex = "",
                            this.age = "",
                            this.phone = ""
                    } else {
                        alert('输入格式不正确，重新输入')
                        return
                    }
                },
                // 删除
                fn(index) {
                    console.log(1);
                    // 如果arr里面istuer: false 就写下面的  this.arr[index].istuer=true
                    this.arr[index].istuer = true
                    let newarr = this.arr;
                    this.arr = [];
                    newarr.forEach(item => {
                        if (!item.istuer) {
                            this.arr.push(item)
                        }
                    });
                    // this.arr.splice(index,1)
                },
                // 正则表达式
                adds(val) {
                    if (val == "name") {
                        let reg = /^[\u4e00-\u9fa5\w]{4,16}$/;
                        this.reg.regname = reg.test(this.name)
                    } else if (val == "age") {
                        let reg = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
                        this.reg.regage = reg.test(this.age)
                    } else if (val == "tel") {
                        let reg = /^1[3|4|5|7|8][0-9]{9}$/;
                        this.reg.regtel = reg.test(this.phone)
                    }

                }

            }
        })
    </script>
</body>

</html>